import { Input, Modal, Form, Select, Spin } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { getUserTypeName } from "../../../Api/name";

const AddUser = ({ user, visible, onCancel, onOk }) => {
  // state begin
  const [addingUser, setAddingUser] = useState({ ...user });
  const [loading, setLoading] = useState(false);
  const [key, setKey] = useState(Math.random());
  useEffect(() => {
    setAddingUser({ ...user });
    setKey(Math.random());
  }, [user]);
  const submitBtn = useRef(null);
  // state end
  return (
    <Modal
      key={key}
      open={visible}
      title="添加用户"
      okText="添加"
      cancelText="取消"
      onCancel={onCancel}
      destroyOnClose={true}
      onOk={() => {
        submitBtn.current.click();
      }}
    >
      <Spin spinning={loading} fullscreen={true} tip="正在提交..."></Spin>
      <Form
        onFinish={async () => {
          setLoading(true);
          await onOk(addingUser);
          setLoading(false);
        }}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}
      >
        <Form.Item
          label="用户名"
          name="name"
          rules={[
            {
              required: true,
              message: "请输入用户名",
            },
          ]}
        >
          <Input
            value={addingUser.name}
            onChange={(e) =>
              setAddingUser({ ...addingUser, name: e.target.value })
            }
            placeholder="请输入"
          />
        </Form.Item>
        <Form.Item
          label="账号"
          name="account"
          rules={[
            {
              required: true,
              message: "请输入账号",
            },
          ]}
        >
          <Input
            value={addingUser.account}
            onChange={(e) =>
              setAddingUser({ ...addingUser, account: e.target.value })
            }
            placeholder="请输入"
          ></Input>
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: "请输入密码",
            },
          ]}
        >
          <Input.Password
            value={addingUser.password}
            onChange={(e) =>
              setAddingUser({ ...addingUser, password: e.target.value })
            }
            placeholder="请输入"
          ></Input.Password>
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="confirmPassword"
          rules={[
            {
              required: true,
              message: "请输入确认密码",
            },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value || getFieldValue("password") === value) {
                  return Promise.resolve();
                }
                return Promise.reject("两次输入的密码不一致!");
              },
            }),
          ]}
        >
          <Input.Password
            value={addingUser.confirmPassword}
            onChange={(e) =>
              setAddingUser({ ...addingUser, confirmPassword: e.target.value })
            }
            placeholder="请输入"
          ></Input.Password>
        </Form.Item>
        <Form.Item
          label="用户类别"
          name="type"
          rules={[
            {
              required: true,
              message: "请选择用户类别",
            },
          ]}
        >
          <Select
            placeholder="请选择"
            value={addingUser.type}
            onChange={(value) => {
              setAddingUser({ ...addingUser, type: value });
            }}
          >
            {(() => {
              const options = [];
              for (let i = 1; i <= 4; i++) {
                options.push(
                  <Select.Option key={i} value={i}>
                    {getUserTypeName(i)}
                  </Select.Option>
                );
              }
              return options;
            })()}
          </Select>
        </Form.Item>
        <Form.Item>
          <button
            ref={submitBtn}
            type="submit"
            style={{ display: "none" }}
          ></button>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default AddUser;
